<template>
	<view class="container">
		<view class="detail-header-box">
			<!-- 右上角的购物车图标 -->
			<view class="fixed-btns-box" @click="onCartTap">
				<view class="fiexd-cart">
					<image src="/static/icon/cart@top.png" mode="aspectFill">
						<!-- <u-loading slot="loading"></u-loading> -->
					</image>
					<view v-if="cartTotalCounts > 0">{{cartTotalCounts}}</view>
				</view>
			</view>

			<!-- 商品主图 -->
			<view class="detail-topic-img">
				<u-image width="600" height="600" :src="ProductDetail.url"
					mode="aspectFit" shape="circle">
					<u-loading slot="loading"></u-loading>
				</u-image>
			</view>

			<view class="cart-box">
				<view class="product-counts">
					<picker mode="selector" :disabled="ProductDetail.stock==0?true:false" :range="countsArray"
						@change="bindPickerChange">
						<view class="picker-flex">
							<text class="counts-tips">数量</text>
							<text class="counts-data">{{productCount}}</text>
							<u-image width="48" height="48" src="/static/icon/arrow@down.png" mode="aspectFill">
								<u-loading slot="loading"></u-loading>
							</u-image>
						</view>
					</picker>
				</view>
				<view class="middle-border"></view>
				<view class="add-cart-btn" @click="addToCartBtn">
					<text>加入购物车</text>
					<u-image width="32" height="32" class="cart-icon" src="/static/icon/cart.png" mode="aspectFill">
					</u-image>
				</view>
			</view>

			<view class="basic-info-box">
				<view class="stock" v-if="ProductDetail.stock > 0">有货</view>
				<view class="stock-no" v-else>缺货</view>
				<view class="name">{{ProductDetail.name}}</view>
				<view class="price">¥ {{ProductDetail.price}}</view>
			</view>



		</view>
		<view class="detail-bottom-box">
			<view class="tabs-box">
				<block v-for="(item,index) in ['商品详情','产品信息','售后保障']" :key="index">
					<view class="tabs-item" :class="currentTabsIndex==index?'selected':''"
						@click="onTabsItemTap(index)">
						{{item}}
					</view>
				</block>
			</view>
			<!-- 商品详情大图 -->
			<view class="product-detail-box">
				<view v-show="currentTabsIndex==0">
					<block v-for="(item,index) in 13" :key="index">
						<u-image width="750" height="400" style="margin-top: -10rpx;"
							:src="`/page_roduct_detail/static/ProductDetail/detail-${index+1}@1-dryfruit.png`" mode="aspectFill"></u-image>
						<!-- <image src="../static/ProductDetail/detail-10@1-dryfruit.png" mode=""></image>	 -->
					</block>
				</view>
				<view v-show="currentTabsIndex==1">
					<block v-for="(item,index) in properties" :key="index">
						<view class="properties-item">
							<view class="properties-name">{{item.name}}</view>
							<view class="properties-detail">{{item.detail}}</view>
						</view>
					</block>
				</view>
				<view class="product-detail-protect" v-show="currentTabsIndex==2">
					<view>七天无理由免费退货</view>
				</view>
			</view>
		</view>
		<!--骨架屏组件-->
		<!-- <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				loading: true,
				ProductDetail: {},
				countsArray: [1, 2, 3, 4, 5, 6, 7, 8, 9],
				productCount: 1,
				currentTabsIndex: 0,
				cartTotalCounts: 0,
				properties: [{
						"name": "品名",
						"detail": "杨梅",
						"update_time": null
					},
					{
						"name": "口味",
						"detail": "青梅味 雪梨味 黄桃味 菠萝味",
						"update_time": null
					},
					{
						"name": "产地",
						"detail": "火星",
						"update_time": null
					},
					{
						"name": "保质期",
						"detail": "180天",
						"update_time": null
					}
				]
			};
		},
		async onLoad(options) {
			let id = Number(options.id)
			let ProductDetail = await uniCloud.callFunction({
				name: 'getProductDetail',
				data: {
					id
				}
			})

			this.ProductDetail = ProductDetail.result.data[0]
			// console.log(this.ProductDetail);
			
			//骨架屏定时器
			// setTimeout(()=>this.loading=false,500);
		},
		methods: {
			...mapMutations('m_cart', ['addToCart']),
			bindPickerChange(event) {
				let index = event.detail.value
				console.log(this.countsArray[index]);
				this.productCount = this.countsArray[index]
			},
			onTabsItemTap(event) {
				// console.log(event);
				this.currentTabsIndex = event
			},
			addToCartBtn() {
				let tempObj = {
					count: this.productCount,
					selectStatus: true,
					// show: false
				};
				let keys = ['id', 'name', 'url', 'price'];
				for (var key in this.ProductDetail) {
					if (keys.indexOf(key) >= 0) {
						tempObj[key] = this.ProductDetail[key];
					}
				}
				// console.log(tempObj);

				this.addToCart(tempObj)
			},
			onCartTap() {
				uni.switchTab({
					url: '../../pages/cart/cart'
				})
			}
		},
		computed: {
			...mapState('m_cart', ['cart']),
			...mapGetters('m_cart', ['total'])
		},
		watch: {
			total: {
				handler(newValue) {
					this.cartTotalCounts = newValue
				},
				immediate: true
			}
		},
	}
</script>

<style lang="scss">
	.container {
		.detail-header-box {
			.fixed-btns-box {
				position: fixed;
				top: 100rpx;
				right: 35rpx;
				width: 80rpx;
				z-index: 99;

				.fiexd-cart view {
					font-size: 24rpx;
					background-color: #AB956D;
					color: white;
					position: absolute;
					right: 64rpx;
					top: 5rpx;
					height: 36rpx;
					width: 36rpx;
					line-height: 36rpx;
					border-radius: 36rpx;
					text-align: center;
				}

				.fiexd-cart image {
					height: 64rpx;
					width: 64rpx;
				}

				.fiexd-cart.animate {
					animation: aCartScale 200ms cubic-bezier(.17, .67, .83, .67);
					animation-fill-mode: backwards;
				}

				image {
					height: 64rpx;
					width: 64rpx;
				}
			}

			.detail-topic-img {
				// width: 750rpx;
				display: flex;
				justify-content: center;

				image {
					width: 100%;
				}
			}

			.cart-box {

				width: 660rpx;
				height: 100rpx;
				margin: 30rpx auto;
				border-radius: 100rpx;
				background-color: #AB956D;
				color: #fff;
				display: flex;
				align-items: center;

				.product-counts {
					width: 360rpx;
					height: 100%;
					display: flex;
					font-size: 24rpx;
					align-items: center;
					// justify-content: center;
					flex-wrap: nowrap;

					.picker-flex {
						width: 360rpx;
						height: 100rpx;
						display: flex;
						align-items: center;
						justify-content: space-evenly;

						image {
							width: 48rpx;
							height: 48rpx;
						}
					}

					.counts-tips {
						// margin: 0 20rpx;
					}

					.counts-data {
						// margin: 0 20rpx;
						font-size: 20px;
					}

					image {
						height: 100%;
						width: 100%;
					}
				}

				.middle-border {
					position: relative;
					left: -35rpx;
					width: 2rpx;
					height: 30rpx;
					border-right: 1rpx #fff solid;
				}

				.add-cart-btn {
					display: flex;
					justify-content: center;
					position: relative;
					flex: 1;

					.cart-icon {
						margin-left: 35rpx;
						height: 32rpx;
						width: 32rpx;
					}
				}
			}


			.basic-info-box {
				padding: 15rpx 0;
				color: #454552;
				text-align: center;

				&>view {
					margin: 20rpx auto;
				}

				.stock {
					font-size: 24rpx;
				}

				.stock-no {
					color: #B42F2D;
				}

				.name {
					font-size: 40rpx;
				}

				.price {
					font-size: 38rpx;
				}
			}
		}

		.detail-bottom-box {
			margin-top: 30rpx;

			.tabs-box {
				height: 90rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 15rpx;

				.tabs-item {
					width: 33.3%;
					color: #C7C7CB;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					display: flex;
					border-bottom: 1rpx solid #D0D0D7;

					&.selected {
						/*color: #AB956D;*/
						color: rgba(171, 149, 109, .8);
						/*border-bottom: 2px solid #AB956D;*/
						border-bottom: 2px solid rgba(171, 149, 109, .8);
					}
				}
			}

			.product-detail-box {
				padding-bottom: 20rpx;

				.properties-item {
					display: flex;
					margin: 25rpx 0;
					font-size: 24rpx;

					.properties-name {
						width: 160rpx;
						color: #808080;
						text-align: center;
					}

					.properties-detail {
						flex: 1;
						color: #333;
						padding-right: 40rpx;
					}
				}

				.product-detail-protect {
					padding: 50rpx;
					font-size: 24rpx;
					color: 808080;
					text-align: center;
					margin-top: 30rpx;
				}
			}
		}
	}
</style>
